<template>
	<view class="welfare_page">
		<navgatsmyVue :title="title"></navgatsmyVue>
		<view class="main">
			<view class="title">
				福利宝箱
			</view>
			<view class="box_list" v-if="boxList.length">
				<view class="box_item" v-for="(item,index) in boxList" :key="index" @click="go_detail(item,index)">
					<view class="imgbox">
						<view class="img" :style="{ backgroundImage: 'url(' + item.box.cover + ')' }"></view>
					</view>
					<view class="msgbox">
						<view class="name">
							{{item.name}}
						</view>
						<view class="desc">
							{{item.description||'无描述信息'}}
						</view>
						<view class="type">
							{{item.type_alias}}
						</view>
					</view>
				</view>
			</view>
			<view class="loading" v-else>
				<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get_banners,
		getBoxDetail_det
	} from '../../../api/outOfTheFree';
	import navgatsmyVue from '../../../Component/navgatsmy/navgatsmy.vue';
	export default {
		data() {
			return {
				title: "福利中心",
				boxList: []
			}
		},
		components: {
			navgatsmyVue
		},
		mounted() {
			this.getBox()
		},
		methods: {
			//获取宝箱列表	
			async getBox() {
				let res = await get_banners()
				this.boxList = res.data
				console.log(this.boxList)
			},
			//去详情页
			go_detail(item, index) {
				uni.navigateTo({
					url: `/pages/index/welfare/welfare_detail/welfare_detail?boxId=${item.box_id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.welfare_page {
		width: 100vw;
		height: 100vh;

		.main {
			width: 100%;
			/* #ifdef APP-PLUS */
			height: calc(100% - 170rpx);
			/* #endif */
			/* #ifdef H5 */
			height: calc(100% - 95rpx);
			/* #endif */
			background-image: url("https://img.jingkakeji.com/img/static/new_index/bg.png");
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				width: 95%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: white;
				font-weight: bold;
				text-shadow: black 2px 2px 2px;
			}

			.loading {
				width: 90%;
				height: 1340rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.box_list {
				width: 90%;
				height: 1340rpx;
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.box_item {
					width: 320rpx;
					height: 400rpx;

					.imgbox {
						width: 100%;
						height: 200rpx;
						background-image: url("https://img.jingkakeji.com/img/static/new_index/imgbox.png");
						background-size: 100% 100%;
						display: flex;
						align-items: center;
						justify-content: center;

						.img {
							width: 200rpx;
							height: 130rpx;
							background-size: 100% 100%;
						}
					}

					.msgbox {
						width: 100%;
						height: 200rpx;
						background-color: #7869DA;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						border-radius: 0 0 10rpx 10rpx;

						.name {
							width: 95%;
							min-height: 60rpx;
							color: white;
							font-weight: bold;
							font-size: 28rpx;
							line-height: 60rpx;
						}

						.desc {
							width: 95%;
							height: 70rpx;
							font-size: 24rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
							color: #ccc;
						}

						.type {
							align-self: self-start;
							background-color: #4CAF50;
							font-size: 22rpx;
							padding: 5rpx 10rpx;
							border-radius: 10rpx;
							color: white;
							margin-left: 10rpx;
							margin-bottom: 20rpx;
						}
					}
				}
			}
		}
	}
</style>